{% extends "_layouts/examples.html" %}
{% block title %}Chip / Long values{% endblock %}

{% block standalone_css %}patterns_chip{% endblock %}

{% block content %}
<span class="p-chip is-selected">
  <span class="p-chip__lead">Short lead</span>
  <span class="p-chip__value">Short value</span>
  <button class="p-chip__dismiss">
    Dismiss
  </button>
</span>
<button class="p-chip">
  <span class="p-chip__value">
    Short value only
  </span>
</button>
<span class="p-chip">
  <span class="p-chip__value">
    Short value + dismiss button
  </span>
  <button class="p-chip__dismiss">
    Dismiss
  </button>
</span>
<button class="p-chip">
  <span class="p-chip__value">
    A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead
  </span>
</button>
<span class="p-chip">
  <span class="p-chip__lead">
    Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short valueVery long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value
  </span>
  <span class="p-chip__value">
    Short value
  </span>
  <button class="p-chip__dismiss">
    Dismiss
  </button>
</span>
<span class="p-chip">
  <span class="p-chip__lead">
    A very long lead A very long lead A very long lead A very long lead A very long lead
  </span>
  <span class="p-chip__value">
    An even longer value An even longer value An even longer value An even longer value An even longer value An even longer value An even longer value An even longer value
  </span>
  <button class="p-chip__dismiss">
    Dismiss
  </button>
</span>

{% endblock %}
